<template>
  <div class="dashboard-container">
    <div class="dashboard-text">欢迎您: {{ name }}</div>
    <el-row :gutter="50">
      <el-col :span="6">
        <el-card class="box-card" shadow="hover">
          <div class="card_item">
            <img src="../../assets/images/num_img1.png" alt="">
            <div class="item_box">
              <h2>博客统计</h2>
              <countTo
                :start-val="blogStartVal"
                :end-val="blogEndVal"
                :duration="2000"
                class="counto"
              />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card" shadow="hover">
          <div class="card_item">
            <img src="../../assets/images/num_img2.png" alt="">
            <div class="item_box">
              <h2>友链统计</h2>
              <countTo
                :start-val="blogRollStartVal"
                :end-val="blogRollEndVal"
                :duration="2000"
                class="counto"
              />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import countTo from 'vue-count-to'
import { getCount } from '@/api/dashboard'
export default {
  name: 'Dashboard',
  components: { countTo },
  data() {
    return {
      blogStartVal: 5000,
      blogEndVal: 2017,
      blogRollStartVal: 5000,
      blogRollEndVal: 4

    }
  },
  computed: {
    ...mapGetters(['name'])
  },
  created() {
    this.getCount()
  },
  methods: {
    async getCount() {
      const data = await getCount()
      if (data.code === 1) {
        this.blogEndVal = data.data.blogCount
        this.blogRollEndVal = data.data.rollCount
      } else {
        this.blogEndVal = 0
        this.blogRollEndVal = 0
      }
    }
  }

}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
    margin-bottom: 30px;
  }
}
.box-card {
  .card_item {
    display: flex;
    justify-items: center;
    img {
      width: 80px;
      height: 80px;
    }
    .item_box {
      margin-left: 60px;
      text-align: center;
      h2 {
        margin: 0;
        margin-bottom: 15px;
        font-size: 30px;
        font-weight: 500;
        color: #515a6e;;
      }
      .counto {
        font-size: 40px;
        color: #19BE6B;
      }
    }
  }
}
</style>
